<template>
    <div class="Tag2">
        <button 
        :class="[focus==true? 'focus':'']"
        @click="handleClick">{{content}}</button>
    </div>
</template>
<script>
export default {
    name: 'Tag2',
    props: ['content','focus'],
    methods:{
        handleClick(){
            this.focus=!this.focus
        }
    }
}
</script>
<style scoped>
    .focus{
        background-color: rgb(55, 106, 247);
        color:#fff !important;
    }
    .Tag2{
        display: inline-block;
        width: 90px;
        height:44px;
        text-align: center;
    }
    .Tag2 button{
        font-size:14px;
        line-height: 28px;
        border-radius: 20px;
        border: 1px solid #585656;
        color: #787878;
    }
    .Tag2 button:hover{
        border: 1px solid rgb(111, 137, 223);
        color: rgb(111, 137, 223);
    }   
</style>
